<template>
    <div class="book-detail-container">
        <!-- 头部 -->
        <div class="top">
            <div 
                class="goback"
                @click="goback()">
                <i class="iconfont icon-fanhui"></i>
                返回
            </div>
        </div>
        <div 
            class="loading"
            v-if="isLoading">
            <img src="@/assets/img/loading.gif" alt="">
        </div>
        <div 
            class="detail"
            v-if="!isLoading">
            <!-- 小说详情 -->
            <div class="book-data">
                <div class="data-top">
                    <img :src="detail.link[1].href" alt="">
                    <div class="data-top-right">
                        <div class="title">{{detail.title}}</div>
                        <div class="typeAauthor">
                            {{detail["pris:book"].category}} | {{detail.author.name}}
                        </div>
                        <div class="point">
                            <span>{{detail["pris:ranking"].value}}</span>分
                        </div>
                        <div class="num">
                            {{detail["pris:subscribe"].clicks}}
                        </div>
                        <div class="price">
                            {{detail["pris:book"].wprice}}阅点/千字
                        </div>
                    </div>
                </div>
                <div class="descrip">
                    {{detail.content.text}}
                </div>
            </div>
            <!-- 阅读按钮 -->
            <div class="go-to-read">
                <div class="btns">
                    <div 
                        class="btn-read"
                        @click="gotoChater(detail.id)">
                        免费试读
                    </div>
                </div> 
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'bookDetail',
    data() {
        return {
            id: null,
            bookName: null,
            isLoading: true,
            detail: null,
        }
    },
    methods: {
        loadDetail() {
            if(this.$route.params.id) {
                this.id = this.$route.params.id;
            }
            if(this.$route.params.bookName) {
                this.bookName = this.$route.params.bookName;
            }
            axios.get('https://apis.netstart.cn/yunyuedu/book/getsub.json?id='+this.id+'&title='+this.bookName)
                .then((success)=>{
                    console.log('detail',success);
                    this.detail = success.feed.entry;
                    this.isLoading = false;
                })
                .catch((err)=>{
                    console.log(err);
                })
        },
        // 返回上一个
        goback() {
            this.$router.go(-1);
        },
        gotoChater(id) {
            this.$router.push('/book-chater/'+id+'/m');
        }
    },
    mounted() {
        this.loadDetail();
    }
}
</script>

<style lang="scss" scoped>
.loading {
    width: 100%;
    height: 100%;
    position: fixed;
    img {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
}

.book-detail-container {
    .top {
        height: 50px;
        font-size: 22px;
        line-height: 34px;
        padding: 8px 15px;
        box-sizing: border-box;
        font-family: oppo-l;
        font-weight: bold;
        background-color: white;
        border-bottom: 1px #ccc solid;
        .goback {
            display: inline-block;
        }
    }
    .data-top {
        display: flex;
        padding: 15px;
        font-size: 14px;
        img {
            width: 100px;
            height: 150px;
            margin-right: 10px;
        }
        .data-top-right {
            width: 230px;
            & > div {
                margin-bottom: 6px;
            }
        }
        .title {
            font-size: 20px;
            font-family: oppo-l;
            font-weight: bold;
        }
        .point {
            span {
                font-size: 20px;
                font-family: oppo-l;
                font-weight: bold;
                color: rgb(255, 174, 0);
                margin-right: 4px;
            }
        }
    }
    .descrip {
        padding: 15px;
        padding-top: 5px;
        font-size: 16px;
        font-family: oppo-l;
        font-weight: bold;
        color: rgb(90, 89, 89);
    }
    .go-to-read {
        height: 51px;

        .btns {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            border-top: 1px solid #ccc;
            background-color: white;
            overflow: hidden;
        }
        .btn-read {
            background-color: rgb(240, 55, 31);
            color: white;
            width: 80%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 5px auto;
            border-radius: 20px;
        }
    }
}

</style>